关于uniapp的绘制canvas 和 常规canvas的区别 |
您所在的位置：网站首页 › createelement canvas › 关于uniapp的绘制canvas 和 常规canvas的区别 |
|
常规h5获得的canvas // //var canvas = document.createElement("canvas"); //创建画布 // console.log(canvas); // canvas.width = tLength * 15; //设置画布宽度，15为字体大小 // canvas.height = 22; //设置画布高度 // //var context = canvas.getContext("2d"); //获取绘图环 // context.textAlign = "center"; //设置居中 // context.fillStyle = 'rgba(255, 255, 255, 0)'; //设置画布颜色 // context.fillRect(0, 0, canvas.width, canvas.height); //绘制白色背景，rect为方形 // context.font = "blod 35px 宋体"; //加粗，字号，字体 // context.fillStyle = "#007AFF"; //设置黑色画笔 // context.fillText(text, canvas.width / 2, canvas.height / 2); //添加文字 // // console.log(canvas.toDataURL("image/jpeg")); //转换为jpg // // console.log(canvas.toDataURL({ // // format: 'png', // // quality: 1 // // })); //转换为png 当前需要的为png 复制代码uniapp的canvas let tLength = text.length; var ctx = uni.createCanvasContext('CanvasCon', this) ctx.setFillStyle('rgba(255, 255, 255, 0)'); // 背景透明色 let canvaswidth = tLength * 30; //设置画布宽度，30为字体大小 let canvasheight = 22; //设置画布高度 console.log(canvaswidth,canvasheight); ctx.fillRect(0, 0, canvaswidth, canvasheight) // fillRect(x,y,宽度，高度) ctx.setTextAlign('center')//文字居中 console.log(text); ctx.setFillStyle('#e31d1a') // 颜色 ctx.fillText(text, canvaswidth / 2, canvasheight / 2)//将文字写如入图片 ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。 uni.canvasToTempFilePath({ // 保存canvas为图片 canvasId: 'CanvasCon', quality: 1, complete: function(res) { // 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径 console.log(res) that.chooseText(res.tempFilePath) } , }) }); }, 复制代码主要的坑就是uniapp下如果做的APP项目不能创建dom对象 原本方法在真机上会报错 一定要用下面的方式 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |